import 'package:common_utils/common_utils.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:part_time_job_pro/common/style/color.dart';
import 'package:part_time_job_pro/common/style/theme.dart';
import 'package:part_time_job_pro/common/values/images.dart';

import 'logic.dart';

class ForgetPage extends StatelessWidget {
  ForgetPage({Key? key}) : super(key: key);

  //路由地址
  static const String routeName = "/forget";
  final logic = Get.find<ForgetLogic>();
  final state = Get.find<ForgetLogic>().state;

  @override
  Widget build(BuildContext context) {
    return GetBuilder<ForgetLogic>(builder: (logic) {
      return Scaffold(
          backgroundColor: AppColor.norWhite01Color,
          appBar: AppBar(
            backgroundColor: AppColor.norWhite01Color,
            leading: InkWell(
                onTap: () {
                  Get.back();
                },
                child: Container(
                  padding: EdgeInsets.all(10.r),
                  child: Image.asset(AssetsImages.appBarBack),
                )),
            elevation: 0,
            title: const Text(
              "找回密码",
              style: AppTheme.appBarStyle,
            ),
          ),
          body: SingleChildScrollView(
              child: Container(
            color: AppColor.norWhite01Color,
            padding: EdgeInsets.symmetric(vertical: 10.r, horizontal: 20.r),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                buildTitle(),
                buildLoginMobile(),
                buildMobileVerifyCode(context),
                buildNewPassowrd(),
                buildRepeatNewPassowrd(),
                buildSubmitButton()
              ],
            ),
          )));
    });
  }

  //处理标题
  Widget buildTitle() {
    return Container(
      alignment: Alignment.centerLeft,
      padding: EdgeInsets.only(top: 5.r, bottom: 5.r),
      child: Text.rich(TextSpan(children: [
        WidgetSpan(
          child: Container(
            padding: EdgeInsets.only(top: 5.r),
            height: 20.r,
            child: Text(
              "*",
              style:
                  TextStyle(fontSize: 16.sp, color: AppColor.norYellow03Colors),
            ),
          ),
        ),
        TextSpan(
          text: "请先输入您丢失账号绑定的手机号码",
          style: TextStyle(
            fontSize: 12.r,
            fontWeight: FontWeight.normal,
            color: AppColor.norGray03Color,
          ),
        )
      ])),
    );
  }

  //手机验证码
  Widget buildMobileVerifyCode(BuildContext context) {
    return Container(
        padding: EdgeInsets.only(top: 5.r),
        color: AppColor.norWhite01Color,
        width: 1.sw,
        child: Column(
          children: [
            Container(
              //padding: EdgeInsets.symmetric(vertical: 2.r, horizontal: 15.r),
              decoration: BoxDecoration(
                color: AppColor.norWhite01Color,
                border: Border(
                  bottom:
                      BorderSide(width: 1.r, color: AppColor.norWhite06Color),
                ),
              ),
              child: Row(children: [
                Container(
                  alignment: Alignment.centerLeft,
                  width: 60.r,
                  child: Text("验证码",
                      style: TextStyle(
                        color: AppColor.norGray03Color,
                        fontSize: 14.sp,
                      )),
                ),
                Expanded(
                    child: Container(
                  margin: EdgeInsets.only(left: 15.r),
                  child: TextField(
                    focusNode: logic.verifyCodeFocusNode,
                    autofocus: true,
                    showCursor: true,
                    cursorHeight: 18.sp,
                    onChanged: (text) {
                      logic.updateVerifyCode(text);
                    },
                    cursorColor: AppColor.norYellow04Colors,
                    controller: logic.verifyCodeEditController,
                    decoration: InputDecoration(
                        hintText: "请输入短信验证码",
                        border: InputBorder.none,
                        suffixIcon: state.verifyText.isNotEmpty &&
                                logic.verifyCodeFocusNode.hasFocus
                            ? IconButton(
                                color: AppColor.norGrayColor,
                                onPressed: () {
                                  logic.clearVerifyCode();
                                },
                                icon: const Icon(Icons.cancel))
                            : const SizedBox(
                                width: 0,
                              ),
                        hintStyle: TextStyle(
                          color: AppColor.norGrayColor,
                          fontSize: 14.sp,
                        )),
                    style: TextStyle(
                        fontSize: 14.sp, color: AppColor.norBlackColors),
                  ),
                )),
                GestureDetector(
                    onTap: () {
                      if (state.codeSeconds == 0) {
                        LogUtil.e("发送验证码");
                        FocusScope.of(context).unfocus();
                        logic.getSmsCode();
                      } else {
                        LogUtil.e("请勿频繁操作!");
                      }
                    },
                    child: Container(
                      alignment: Alignment.centerRight,
                      width: 80.r,
                      child: Text(
                          state.codeSeconds > 0
                              ? "${state.codeSeconds}s"
                              : "获取验证码",
                          style: TextStyle(
                            color: AppColor.norYellow03Colors,
                            fontSize: 14.sp,
                          )),
                    )),
              ]),
            )
          ],
        ));
  }

  //手机号码
  Widget buildLoginMobile() {
    return Container(
        padding: EdgeInsets.only(top: 10.r),
        color: AppColor.norWhite01Color,
        width: 1.sw,
        child: Column(
          children: [
            Container(
              decoration: BoxDecoration(
                color: AppColor.norWhite01Color,
                border: Border(
                  bottom:
                      BorderSide(width: 1.r, color: AppColor.norWhite06Color),
                ),
              ),
              child: Row(children: [
                Container(
                  alignment: Alignment.centerLeft,
                  width: 60.r,
                  child: Text("手机号码",
                      style: TextStyle(
                        color: AppColor.norGray03Color,
                        fontSize: 14.sp,
                      )),
                ),
                Expanded(
                    child: Container(
                  margin: EdgeInsets.only(left: 15.r),
                  child: TextField(
                    focusNode: logic.mobileFocusNode,
                    keyboardType: TextInputType.text,
                    keyboardAppearance: Brightness.light,
                    autofocus: true,
                    showCursor: true,
                    cursorHeight: 18.sp,
                    onChanged: (text) {
                      logic.updateMobile(text);
                    },
                    cursorColor: AppColor.norYellow04Colors,
                    controller: logic.mobileEditController,
                    decoration: InputDecoration(
                        hintText: "请输账号手机号码",
                        border: InputBorder.none,
                        suffixIcon: state.mobileText.isNotEmpty &&
                                logic.mobileFocusNode.hasFocus
                            ? IconButton(
                                color: AppColor.norGrayColor,
                                onPressed: () {
                                  logic.clearMobile();
                                },
                                icon: const Icon(Icons.cancel))
                            : SizedBox(
                                width: 0.r,
                              ),
                        hintStyle: TextStyle(
                          color: AppColor.norGrayColor,
                          fontSize: 14.sp,
                        )),
                    style: TextStyle(
                        fontSize: 14.sp, color: AppColor.norBlackColors),
                  ),
                ))
              ]),
            )
          ],
        ));
  }

  //新的密码
  Widget buildNewPassowrd() {
    return Container(
        padding: EdgeInsets.only(top: 5.r),
        color: AppColor.norWhite01Color,
        width: 1.sw,
        child: Column(
          children: [
            Container(
              //padding: EdgeInsets.symmetric(vertical: 2.r, horizontal: 15.r),
              decoration: BoxDecoration(
                color: AppColor.norWhite01Color,
                border: Border(
                  bottom:
                      BorderSide(width: 1.r, color: AppColor.norWhite06Color),
                ),
              ),
              child: Row(children: [
                Container(
                  alignment: Alignment.centerLeft,
                  width: 60.r,
                  child: Text("新的密码",
                      style: TextStyle(
                        color: AppColor.norGray03Color,
                        fontSize: 14.sp,
                      )),
                ),
                Expanded(
                    child: Container(
                  margin: EdgeInsets.only(left: 15.r),
                  child: TextField(
                    focusNode: logic.passwordFocusNode,
                    autofocus: true,
                    obscureText: state.isObscure,
                    showCursor: true,
                    cursorHeight: 18.sp,
                    onChanged: (text) {
                      logic.updatePassword(text);
                    },
                    cursorColor: AppColor.norYellow04Colors,
                    controller: logic.passwordEditController,
                    decoration: InputDecoration(
                        hintText: "6-20位数字或字母",
                        border: InputBorder.none,
                        suffixIcon: state.passwordText.isNotEmpty &&
                                logic.passwordFocusNode.hasFocus
                            ? IconButton(
                                color: AppColor.norGrayColor,
                                onPressed: () {
                                  logic.clearPassword();
                                },
                                icon: const Icon(Icons.cancel))
                            : SizedBox(
                                width: 0.r,
                              ),
                        hintStyle: TextStyle(
                          color: AppColor.norGrayColor,
                          fontSize: 14.sp,
                        )),
                    style: TextStyle(
                        fontSize: 14.sp, color: AppColor.norBlackColors),
                  ),
                )),
                Container(
                  alignment: Alignment.centerLeft,
                  child: IconButton(
                      color: AppColor.norMainThemeColors,
                      onPressed: () {
                        logic.updateIsObscure();
                      },
                      icon: Icon(state.isObscure
                          ? Icons.visibility
                          : Icons.visibility_off)),
                ),
              ]),
            )
          ],
        ));
  }

  //确认密码
  Widget buildRepeatNewPassowrd() {
    return Container(
        padding: EdgeInsets.only(top: 5.r),
        color: AppColor.norWhite01Color,
        width: 1.sw,
        child: Column(
          children: [
            Container(
              //padding: EdgeInsets.symmetric(vertical: 2.r, horizontal: 15.r),
              decoration: BoxDecoration(
                color: AppColor.norWhite01Color,
                border: Border(
                  bottom:
                      BorderSide(width: 1.r, color: AppColor.norWhite06Color),
                ),
              ),
              child: Row(children: [
                Container(
                  alignment: Alignment.centerLeft,
                  width: 60.r,
                  child: Text("确认密码",
                      style: TextStyle(
                        color: AppColor.norGray03Color,
                        fontSize: 14.sp,
                      )),
                ),
                Expanded(
                    child: Container(
                  margin: EdgeInsets.only(left: 15.r),
                  child: TextField(
                    focusNode: logic.repeatPasswordFocusNode,
                    autofocus: true,
                    obscureText: state.isRepObscure,
                    showCursor: true,
                    cursorHeight: 18.sp,
                    onChanged: (text) {
                      logic.updateRepeatPassword(text);
                    },
                    cursorColor: AppColor.norYellow04Colors,
                    controller: logic.repeatPasswordEditController,
                    decoration: InputDecoration(
                        hintText: "6-20位数字或字母",
                        border: InputBorder.none,
                        suffixIcon: state.repeatPasswordText.isNotEmpty &&
                                logic.repeatPasswordFocusNode.hasFocus
                            ? IconButton(
                                color: AppColor.norGrayColor,
                                onPressed: () {
                                  logic.clearRepeatPassword();
                                },
                                icon: const Icon(Icons.cancel))
                            : SizedBox(
                                width: 0.r,
                              ),
                        hintStyle: TextStyle(
                          color: AppColor.norGrayColor,
                          fontSize: 14.sp,
                        )),
                    style: TextStyle(
                        fontSize: 14.sp, color: AppColor.norBlackColors),
                  ),
                )),
                Container(
                  alignment: Alignment.centerLeft,
                  child: IconButton(
                      color: AppColor.norMainThemeColors,
                      onPressed: () {
                        logic.updateRepIsObscure();
                      },
                      icon: Icon(state.isRepObscure
                          ? Icons.visibility
                          : Icons.visibility_off)),
                ),
              ]),
            )
          ],
        ));
  }

  //注册按钮
  Widget buildSubmitButton() {
    return GestureDetector(
        onTap: () {
          logic.submitResetPasword();
        },
        child: Container(
          width: 1.sw,
          alignment: Alignment.center,
          margin: EdgeInsets.only(top: 15.r, bottom: 0),
          padding: EdgeInsets.symmetric(vertical: 10.r),
          decoration: BoxDecoration(
              color: AppColor.norYellow04Colors,
              borderRadius: BorderRadius.circular(6)),
          child: Text("提交",
              style:
                  TextStyle(color: AppColor.norWhite01Color, fontSize: 20.sp)),
        ));
  }
}
